<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 
         * react-virtulized
         * 
         * <List
         *  width={300}
         *  height={300}
         *  rowCount={list.length}
         *  rowHeight={20}
         *  rowRenderer={rowRenderer}
         * />
         *   核心思想：假设你有一个包含 10,000 个项目的列表，但用户一次只能看到视口（Viewport）中的 10 个项目。react-virtualized 只会渲染这 10 个可见项目，
         * 以及可能预加载的少量前后项目（用于平滑滚动），而不是创建 10,000 个 DOM 元素。
         * 
         * 
         * 
         * 监听滚动容器的 scroll 事件。
            在滚动事件中，快速计算新的可见项目范围。
            如果可见项目范围发生变化，则触发组件的重新渲染（setState），更新渲染窗口。
            为了性能，通常会对滚动事件进行节流（Throttling），避免在快速滚动时过于频繁地触发重绘


    无限滚动的本质是：监听用户滚动行为，当用户接近内容底部时，触发加载新数据的请求，并将新数据追加到现有列表的末尾。
         * 
         * **/ 
    </script>
</body>
</html>